<template>
  <div class="bac">
    <van-form @submit="onSubmit" class="login-container">
      <h3 class="login_title">Secret register</h3>
      <van-field v-model="username" name="username" label="用户名" placeholder="用户名"
        :rules="[{ required: true, message: '请填写用户名' }]" />
      <van-field v-model="password" type="password" name="password" label="密码" placeholder="密码"
        :rules="[{ required: true, message: '请填写密码' }]" />
      <van-field v-model="repassword" type="password" name="repassword" label="确认密码" placeholder="密码"
        :rules="[{ required: true, message: '请填写密码' }]" />
      <div style="margin: 16px;">
        <van-button round block type="info" native-type="submit">注册</van-button>
      </div>
    </van-form>

  </div>
</template>

<script>
import { fetchRegister } from "../api/user.js"
export default {
  data() {
    return {
      username: "",
      password: "",
      repassword: ""
    }
  },
  methods: {
    async onSubmit(formData) {
      if (this.password !== this.repassword) {
        this.$toast('两次密码不一致');
        return;
      }
      // 调用注册接口
      let { status, message } = await fetchRegister(formData)
      this.$toast(message)
      if (status === 0) {
        this.$router.push('/login')
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.bac {
  background: url("https://img0.baidu.com/it/u=1486219278,3321764833&fm=253&fmt=auto&app=138&f=JPEG?w=231&h=500") no-repeat;
  background-position: center;
  height: 100%;
  width: 100%;
  background-size: cover;
  position: fixed;
  background-color: transparent;

  .van-field {
    background: transparent;
  }
}

body {
  margin: 0px;
  padding: 0;
}

.login-container {
  border-radius: 15px;
  margin: 90px auto;
  width: 350px;
  padding: 35px 35px 15px 35px;
  box-shadow: 0 0 25px #cac6c6;
  left: 0;
  bottom: 0;

}

.login_title {
  text-align: center;
  color: #505458;
}
</style>
